<template>
  <VPage>
    <div class="performance-indicator">
      <XForm style="" ref="form" class="form" :fieldList="fieldList" :options="formOption" @submit="handleSearch" :formData="formData" @reset="resetForm">
        <template #ShopCascade>
          <SelectsShopCascade v-model:platform="formData.platform_ids" v-model:site="formData.site_ids" v-model:shop="formData.shop_ids" :multiple="true" />
        </template>
      </XForm>
      <div class="echart">
        <div id="echart-view"></div>
      </div>
    </div>
  </VPage>
</template>

<script setup>
import XForm from "@/components/XForm/index.vue"
import SelectsShopCascade from "@/components/Selects/SelectsShopCascade/index.vue"
import { formatDate } from "@/utils"
import { performanceOption, performanceIndex } from "./api"
import * as echarts from "echarts"

const optCurrency = ref([])
const optioCycle = ref([])
const optioIndex = ref([])
onMounted(async () => {
  let res = (await performanceOption()).data
  optCurrency.value = res.currency
  optioCycle.value = res.cycle
  optioIndex.value = res.index
  handleSearch()
})

const formOption = ref({
  inline: true,
  option: true,
  showResetButton: true,
})

const fieldList = ref([
  { slot: "ShopCascade", field: "platform_ids" },
  {
    field: "index",
    type: "select",
    options: {
      placeholder: "指标",
      data: optioIndex,
    },
    style: { width: "160px" },
  },
  {
    field: "date_range",
    type: "dateTimeRangeNorm",
    selectStyle: { width: "120px" },
  },
  {
    field: "sales_id",
    type: "cascader",
    itemProps: { placeholder: "所属部门/人员" },
    style: { width: "200px" },
  },
  {
    field: "currency",
    type: "select",
    options: {
      placeholder: "币种",
      data: optCurrency,
    },
    style: { width: "160px" },
  },
  {
    field: "granularity",
    type: "select",
    clearable: false,
    options: {
      placeholder: "统计周期",
      data: optioCycle,
    },
    style: { width: "140px" },
  },
])

const handleSearch = async (formValues) => {
  let params = { ...formData.value }
  initEcharts(params)
}
const getTime = () => {
  const temp = new Date()
  temp.setTime(temp.getTime() - 3600 * 1000 * 24 * 30)
  return [formatDate(new Date(temp.setHours(0, 0, 0, 0))), formatDate(new Date(new Date().setHours(23, 59, 59, 0)))]
}
const formData = ref({
  platform_ids: [],
  site_ids: [],
  shop_ids: [],
  cycle: "day",
  date_range: getTime(),
  index: 1,
})
const resetForm = () => {
  formData.value.platform_ids = []
  formData.value.site_ids = []
  formData.value.shop_ids = []
}
const initEcharts = async () => {
  try {
    let params = { ...formData.value }
    let res = await performanceIndex(params)
    var chartDom = document.getElementById("echart-view")
    var myChart = echarts.init(chartDom)
    var option

    option = {
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["目标值", "完成值"],
        left: "3%",
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "6%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: res.data.map((v) => v.date),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "目标值",
          type: "line",
          smooth: true,
          data: res.data.map((v) => v.target),
        },
        {
          name: "完成值",
          type: "line",
          smooth: true,
          data: res.data.map((v) => v.finish),
        },
      ],
    }
    option && myChart.setOption(option)
  } catch (err) {
    console.warn(err)
  }
}
</script>

<style lang="scss" scoped>
.performance-indicator {
  display: flex;
  flex-direction: column;
  height: 100%;
  // padding: 8px 8px 0;
  :deep(.el-form) {
    padding: 8px;
    padding-bottom: 10px;
    flex-wrap: wrap;
    gap: 10px;
    .el-form-item {
      margin: 0 !important;
    }
  }
  .echart {
    border-top: 1px solid var(--base-border-color);
    padding-top: 8px;
    flex: 1;
    margin: 0 8px;
  }
}
#echart-view {
  width: 100%;
  height: 100%;
}
</style>
